
<template>

  <div class="doge-editor-container">
    <div class="doge-editor-and-toolbar">
      <DogeEditorToolBar class="doge-editor-toolbar" @tool-click="handleToolClick">
        <template #right-tools>
          <el-select
              placeholder="数据源"
              size="small"
              class="db-meta-select"
              v-model="currentSelected.dataSource" @change="refreshDatabases">
            <el-option
                :key="dataSource.name"
                v-for="dataSource in allDataSources"
                :label="dataSource.type + '-' + dataSource.name"
                :value="dataSource.name"/>
          </el-select>

          <el-select
              filterable
              placholder="数据库"
              default-first-option
              size="small"
              class="db-meta-select" v-model="currentSelected.database" @change="refreshSchemas">
            <el-option :key="database" v-for="database in allDatabases" :label="database" :value="database"/>
          </el-select>

          <el-select
              filterable
              placholder="模式"
              size="small"
              class="db-meta-select"
              default-first-option
              v-model="currentSelected.schema" @change="refreshTables">
            <el-option :key="schema" v-for="schema in allSchemas" :label="schema" :value="schema">{{schema}}</el-option>
          </el-select>
          <el-select
              filterable
              placholder="表"
              size="small"
              class="db-meta-select"
              clearable
              collapse-tags
              collapse-tags-tooltip
              style="width: 10em"
              v-model="currentSelected.table" multiple>
            <el-option :key="table" v-for="table in allTables" :label="table" :value="table"></el-option>
          </el-select>
        </template>
      </DogeEditorToolBar>
      <DogeCodeEditor ref="editor" class="doge-code-editor" @show-chat="chatPanelVisible = true"></DogeCodeEditor>
    </div>
    <DogeChatPanel
        :get-editor-code="getCode"
        :db-meta-info="currentSelected"
        class="doge-chat-panel"
        v-show="chatPanelVisible"
        @close-panel="chatPanelVisible = false"
        @set-code="setCode"
        @error-tips="errorTips"/>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import DogeCodeEditor from "./DogeCodeEditor.vue"
import DogeChatPanel from "./DogeChatPanel.vue";
import DogeEditorToolBar from "./DogeEditorToolBar.vue";
import api from "../api.js";

const chatPanelVisible = ref(false)
const editor = ref(null);

const allDataSources = ref([]);
const allDatabases = ref([]);
const allSchemas = ref([]);
const allTables = ref([]);

const currentSelected = ref({
  dataSource: null,
  database: null,
  schema: null,
  table: []
});

function refreshDataSources() {
  api.getDataSources().then(dataSources => {
    allDataSources.value = dataSources.data;
  })
}


function refreshDatabases() {
  if (!currentSelected.value.dataSource) {
    return;
  }
  api.getDatabase(currentSelected.value.dataSource).then(databases => {
    allDatabases.value = databases.data;
  })
}

function refreshSchemas() {
  if (!currentSelected.value.dataSource || !currentSelected.value.database) {
    return;
  }

  api.getSchema(currentSelected.value.dataSource, currentSelected.value.database).then(schemas => {
    allSchemas.value = schemas.data;
  })
}

function refreshTables() {
  if (!currentSelected.value.dataSource || !currentSelected.value.database || !currentSelected.value.schema) {
    return;
  }
  api.getTable(currentSelected.value.dataSource, currentSelected.value.database, currentSelected.value.schema).then(tables => {
    allTables.value = tables.data;
  })
}

onMounted(() => {
  refreshDataSources();
})

function setCode(newCode) {
  editor.value.setEditorCode(newCode)
}

function errorTips(msg) {
  alert(msg)
}

function getCode() {
  return editor.value.getEditorCode()
}

function handleToolClick(tool) {
  if (tool === "chat") {
    chatPanelVisible.value = true;
  }
}


</script>

<style scoped>
.doge-editor-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.doge-editor-and-toolbar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.doge-editor-toolbar .db-meta-select {
  width: 5em;
}

.doge-chat-panel {
  position: absolute;
  top: 0;
  right: 0;
}

</style>